// tabs插件：包括超过10个tab给出提示，增加右键刷新和删除功能
(function ($) {
  /**
   * created by yuki
   * mini-tab扩展方法：启动Tab右键菜单和超过Tab个数警告功能
   * @param {Object} ele Tabs的id
   * @param {Number} num 自定义不允许超过Tab的个数
   * @param {Object} _params 自定义右键菜单距离鼠标的位置
   */
  var Tab = function (ele, num, _params) {
    var _this = this;
    // 右键某个tab时，这个tab的下标
    this.index = 0;

    // 保存配置参数
    this.ele = ele;
    this.params = _params;
    this.num = num;

    // 默认配置
    this.config = {
      "left": 5,
      "top": 10
    }

    // 如果配置参数存在，就扩展默认的配置参数
    if (this.params) {
      $.extend(this.config, this.params);
    }

    // 默认或非默认最终配置
    var config = this.config;

    // 获取mini-tabs对象
    var tabs = mini.get($(ele).prop('id'));

    if ($('body').find('#tooManyTabs').length <= 0) {
      // 渲染超过指定个数tabs时的警告弹窗
      this.initMoreThen()
    }
    
    // 利用tab的钩子onActiveChanged让tab不超过10个
    tabs.on('activeChanged', function (e) {
      if (e.sender.tabs.length > (_this.num ? _this.num : 10)) {
        // 因为用onActiveChanged这个钩子没有openTab的钩子，所以每次切换activeTab都调用它，
        // 包括打开tab也调用这个钩子，所以超过10个后打开第11个再删除第11个
        var current = tabs.getActiveTab();
        tabs.removeTab(current);
        // 超过10个后弹窗
        var popup = mini.get('tooManyTabs');
            popup.show();
            // 指定个数放入弹窗
            $('#tooManyTabs .over-tab-num').text(_this.num);
      }
    })

    // 渲染右键菜单
    this.initMenu();

    // 在tab上右键时
    $(this.ele).on('contextmenu',  '.mini-tab', function (e) {
      // 隐藏所有菜单
      $('.contextmenus').hide();

      // 阻止自带右键
      e.preventDefault();
      // tab的当前下标付给index
      _this.index = $(e.currentTarget).parents('tr').find('.mini-tab').index($(e.currentTarget));
      // 点击iframe内部时隐藏右键菜单
      var iframes = document.getElementsByTagName('iframe');
      for (var i = iframes.length - 1; i >= 0; i--) {
        $(iframes[i].contentWindow.document).click(function () {
          $(_this.ele + '_contextmenu').hide()
        });
      }

      // 获取自定义的右键菜单
      var menu = document.querySelector(_this.ele +'_contextmenu');

      // 根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = e.pageX + config.left + 'px';
      menu.style.top = e.pageY + config.top + 'px';

      // 让它显示出来
      menu.style.display = 'block';
    });

    
    // 绑定关闭其他页面事件
    $(this.ele +'_contextmenu').children(this.ele +'_closeOther').on('click', function () {
      _this.closeOther(_this);
      $(this).parent(_this.ele + '_contextmenu').hide();
    });

    // 绑定刷新页面事件
    $(this.ele + '_contextmenu').children(this.ele +'_refresh').on('click', function() {
      _this.refresh(_this);
      $(this).parent(_this.ele + '_contextmenu').hide();
    });

    // 绑定关闭所有页面事件
    $(this.ele + '_contextmenu').children(this.ele + '_closeAll').on('click', function () {
      _this.closeAll();
      $(this).parent(_this.ele + '_contextmenu').hide();
    });

    // 绑定关闭弹窗事件
    $('#tooManyTabs .buttons').on('click', function () {
      _this.closeWindow()
    });

    // 点击空白地方隐藏右键菜单
    $(document).click(function () {
      $(_this.ele + '_contextmenu').hide()
    })

  }

  Tab.prototype = {
    refresh: function (_this) {
      var tabs = mini.get($(this.ele).prop('id'));
      tabs.reloadTab(tabs.getTabs()[_this.index])
      tabs.activeTab(tabs.getTabs()[_this.index])
    },

    closeOther: function (_this) {
      var tabs = mini.get($(this.ele).prop('id'));
      var arr = tabs.tabs;
      var butArr = [];
      // 当前的不删除，加入butArr
      butArr.push(arr[_this.index]);
      for (var i = 0; i < arr.length; i++) {
        var element = arr[i];
        if (!element.showCloseButton) {
          butArr.push(element)
        }
      }
      tabs.removeAll(butArr);
    },

    closeAll: function () {
      var tabs = mini.get($(this.ele).prop('id'));
      var arr = tabs.tabs;
      var butArr = [];
      for (var i = 0; i < arr.length; i++) {
        var element = arr[i];
        if (!element.showCloseButton) {
          butArr.push(element)
        }
      }
      tabs.removeAll(butArr)
    },

    closeWindow: function () {
      var popup = mini.get("tooManyTabs");
      popup.hide()
    },

    initMoreThen: function () {
      var MoreThen = '<div id="tooManyTabs" title="提示" class="mini-window svy-window-warning" style="width:400px;height:206px;" showModal="true" allowDrag="true">' +
        '<div class="tips">' +
          '<div class="information">打开Tab超过<span class="over-tab-num"></span>个，请先关闭其他Tab。</div>' +
        '</div>' +
        '<div class="buttons">' +
          '<div class="close-winidow"><a class="mini-button svy-btn-small close-window">确认</a></div>' +
        '</div>' +
      '</div>';
      $('body').append($(MoreThen));
      mini.parse();
    },

    // 一个Tabs对应一个菜单
    initMenu: function () {
      var ele = $(this.ele).prop('id');
      var contentMenu = '<div id="' + ele +'_contextmenu" class="contextmenus">' +
        '<div class="contextmenu" id="' + ele +'_refresh">刷新页面</div>' +
        '<div class="contextmenu" id="' + ele +'_closeOther">关闭其他页面</div>' +
        '<div class="contextmenu" id="' + ele +'_closeAll">关闭所有页面</div>' +
      '</div>';
      $('body').append($(contentMenu));
    }
  }

  //注册成JQuery方法
  $.fn.extend({
    TabMenu: function (num, _param) {
      this.each(function () {
        new Tab('#' + this.id, num, _param);
      });
      return this;
    }
  });
  
  // window.Tab = Tab;
  
})(jQuery);
